<script setup>
import { RouterLink } from 'vue-router'
import Versions from '../components/Versions.vue'

const quit = () => {
    window.electron.operate('close')
}
</script>

<template>
    <div class="container">
        <nav>
            <RouterLink to="/home">
                <Button type="text" icon="md-home" plain></Button>
            </RouterLink>
            <Button type="text" icon="md-close" plain @click="quit"></Button>
        </nav>
        <main>
            <Card style="width:320px">
                <div style="text-align:center">
                    <img width="160px" src="../assets/electron.svg">
                    <h3>基于 Electron Vite 构建的桌面应用</h3>
                </div>
            </Card>

        </main>
        <footer>
            <Versions></Versions>
        </footer>
    </div>
</template>

<style scoped lang="less">
.container {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    nav {
        width: 100%;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 5px;
        background: white;
        box-shadow: 0px 0px 2px 0px lightgray;
        // 将导航区域标记为 可拖拽
        -webkit-app-region: drag;
        // 按钮和a标签标记为不可拖拽
        button, a {
            -webkit-app-region: no-drag;
        }
    }

    main {
        width: 100%;
        height: calc(100% - 36px - 44px);
        background-image: url('../assets/wavy-lines.svg');
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    footer {
        width: 100%;
        height: 44px;
        display: flex;
        justify-content: center;
    }
}
</style>